<template>
	<view>
		<view class="item" v-for="(item,index) in data">
			
			<view class="img">
				<img :src="item.img" alt="" style="width: 200px;height: 200px;"/>
			</view>
			<view class="name">{{item.nm}}</view>
			<!-- <view class="cat">{{item.cat}}</view> -->
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from '../../utils/config';
	import {
		userStore
	} from '../../store/userstore';
	import { data } from '../../utils/data';
	let store=userStore()
	onLoad(()=>{
		getHotMovieList()
	})
	 async function getHotMovieList(){
		let res=await uni.$get("https://wx.maoyan.com/mmdb/movie/v2/list/hot.json")
	}
</script>

<style>
.item {
	  width: 90%;
	  height: max-content;
	  padding: 10rpx;
	  margin: 10px auto; /* 增加间距 */
	  border: 1px solid #ddd; /* 边框颜色更浅 */
	  border-radius: 10px;
	  display: flex;
	  background-color: #ffffff; /* 背景颜色 */
	  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
	  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
	}
	
	.item:hover {
	  transform: translateY(-2px); /* 悬停时上移 */
	  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深 */
	}
	
	.img image {
	  border-radius: 10px; /* 圆角 */
	  margin: 5px;
	  transition: transform 0.3s ease; /* 添加过渡效果 */
	}
	
	.img image:hover {
	  transform: scale(1.05); /* 悬停时放大 */
	}
	
	.name {
	  display: flex;
	  align-items: center;
	  font-size: 19px; /* 字体大小 */
	  color: #333; /* 字体颜色 */
	  margin-left: 10px; /* 左边距 */
	}
	/* .cat {
	  display: flex;
	  align-items: center;
	  margin-top: 10px;
	  font-size: 16px; /* 字体大小 */
	/*  color: #333; /* 字体颜色 */
	 
	
	.name text {
	  font-family: '华文楷体'; /* 使用华文楷体字体 */
	  font-weight: bold; /* 字体加粗 */
	  color: #007aff; /* 字体颜色 */
	  transition: color 0.3s; /* 字体颜色变化过渡 */
	}
	
	.name text:hover {
	  color: #0056b3; /* 悬停时的字体颜色 */
	}

</style>
